import { createVNode, render } from 'vue'
import LoginVue from '@/components/templates/login/LoginVue.vue'
import UpdatePopup from '@/components/templates/UpdatePopup.vue'

interface AuthInterface {
  /** 全局统一登录 */
  login(): void;

  /** 打开站点更新提示弹窗 */
  updatePopup(option: AuthNamespace.UpdatePopup): void;

  /** 销毁页面指定 id dom元素 */
  destroyDiv(name: string): void;
}

export namespace AuthNamespace {
  export interface UpdatePopup {
    /** 点击取消回调 */
    cancel?: () => void;
    /** 点击确认回调 */
    confirm?: () => void;
  }
}

export class Auth implements AuthInterface {
  private static _ins = new Auth()
  private name: string = 'hope-'

  public static get ins(): Auth {
    return Auth._ins ? Auth._ins : (Auth._ins = new Auth())
  }

  private render(className: string, div?: HTMLDivElement | HTMLAudioElement, template?: any, props?: any) {
    const doms = document.getElementsByClassName(className)
    for (let i = 0; i < doms.length; i++) {
      doms[i].remove()
    }
    if (div) {
      div.setAttribute('class', className) // 为dom添加一个唯一标识类（无实质功能）
      document.body.appendChild(div) // 容器追加到body中
      const vNode = createVNode(template, props) // 将组件编译为虚拟dom节点
      render(vNode, div) // 将虚拟dom添加到div容器中
    }
  }

  destroyDiv(name: string): void {
    const div = document.createElement('div')
    this.render(this.name + name, div)
  }

  login(): void {
    const div = document.createElement('div')
    this.render(this.name + 'login', div, LoginVue, {})
  }

  updatePopup(option: AuthNamespace.UpdatePopup): void {
    const div = document.createElement('div')
    this.render(this.name + 'updatePopup', div, UpdatePopup, option)
  }

}

export const auth = Auth.ins
